import { useState } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

interface SearchPlayerProps {
  onSearch: (playerId: string) => void
  loading: boolean
}

export default function SearchPlayer({ onSearch, loading }: SearchPlayerProps) {
  const [input, setInput] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (input.trim()) {
      onSearch(input.trim())
    }
  }

  return (
    <Card className="modern-card gradient-border">
      <CardHeader className="text-center pb-4">
        <CardTitle className="text-2xl font-bold text-foreground flex items-center justify-center space-x-2">
          <span>🔍</span>
          <span>Player Search</span>
        </CardTitle>
        <CardDescription className="text-muted-foreground text-base">
          Search by Steam username or Account ID to view detailed player statistics
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="relative">
            <Input
              type="text"
              placeholder="Steam ID, Dota2 ID"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              className="modern-input text-base h-12 pr-24"
              disabled={loading}
            />
            <Button
              type="submit"
              disabled={loading || !input.trim()}
              className="absolute right-1 top-1 h-10 px-4 modern-button-primary shine-effect"
            >
              {loading ? (
                <div className="flex items-center space-x-2">
                  <div className="loading-spinner w-4 h-4"></div>
                  <span>Searching...</span>
                </div>
              ) : (
                <div className="flex items-center space-x-2">
                  <span>🚀</span>
                  <span>Search</span>
                </div>
              )}
            </Button>
          </div>
        </form>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
          <div className="text-center p-4 rounded-lg bg-muted/30 border border-border/50">
            <div className="text-sm font-medium text-foreground mb-1">Username</div>
            <div className="text-xs text-muted-foreground">Steam display name</div>
          </div>
          <div className="text-center p-4 rounded-lg bg-muted/30 border border-border/50">
            <div className="text-sm font-medium text-foreground mb-1">Steam ID64</div>
            <div className="text-xs text-muted-foreground">17-digit identifier</div>
          </div>
          <div className="text-center p-4 rounded-lg bg-muted/30 border border-border/50">
            <div className="text-sm font-medium text-foreground mb-1">Account ID</div>
            <div className="text-xs text-muted-foreground">Dota2 account number</div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}